<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
    <title>代理管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <script src="../js/lib/jquery.min.js?v=20170408"></script>
    <script src="../js/lib/jquery.cookie.js?v=20170408"></script>
    <script src="../js/lib/jsrender.js?v=20170408"></script>
    <script src="../js/lib/bootstrap.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table-zh-CN.min.js?v=20170408"></script>
    <script src="../js/lib/vue.min.js?v=20170408"></script>
    <script src="../js/common.js?v=20170408"></script>
    <script src="../js/main.js?v=20170408"></script>
    <style>
        .box-title {
            font-size: 24px;
            color: #444;
            display: block;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="productMain">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-md-1 control-label">账号名称</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="name" placeholder="请输入账号名称"
                                   style="font-size: 12px!important;height: 30px!important;">
                        </div>
                        <label class="col-md-1 control-label">手机号</label>
                        <div class="col-md-2">
                            <input type="text" class="form-control" id="telephone" v-modal="telephone"
                                   placeholder="请输入手机号" style="font-size: 12px!important;height: 30px!important;">
                        </div>
                        <label class="col-md-1 control-label">角色</label>
                        <div class="col-md-2">
                            <select name="powerId" id="selpowerId" style="font-size: 12px!important;">
                                <option value="">全部</option>
                                <option value="2">顶级代理商</option>
                                <option value="3">普通代理</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button type="button"
                                    style="font-size: 14px!important;height: 30px!important;line-height: 0px;!important;border-color:#576b95;background-color: #576b95;"
                                    class="btn btn-primary pull-left" @click="turnPage(1)">搜索
                            </button>
                        </div>
                        <!--<label class="col-md-2 control-label">三方SKU</label>-->
                        <!--<div class="col-md-2">-->
                        <!--<input type="text" class="form-control" id="selSku" placeholder="">-->
                        <!--</div>-->
                    </div>
                </form>
            </div>
        </div>
        <!--添加弹框-->
        <!--  <div class="form-group">
              <div class="col-md5">
                  <a href="javascript:void(0);" class="btn btn-success" style="background-color: #c4d703;border-color: #c4d703;" @click="addManager">添加</a>
              </div>
              &lt;!&ndash; Modal &ndash;&gt;
          </div>-->
        <table id="table" class="table table-hover table-bordered">
            <thead>
            <tr>
                <span class="box-title">当前检索条件共有{{totalNum}}条数据</span>
                <th class="text-center"></th>
                <th class="text-center">账号名称</th>
                <th class="text-center">手机号</th>
                <th width="80px">房卡余额</th>
                <th width="80px">总房卡数</th>
                <th width="80px" class="text-center">状态</th>
                <th width="100px" class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr v-for="manager in managerList" v-if="managerList.length>0">
                <td style="width: 29px;vertical-align: middle;text-align: center;" v-text="$index+1"></td>
                <td style="width: 50px;vertical-align: middle;text-align: center;" v-text="manager.name"></td>
                <td style="width: 50px;vertical-align: middle;text-align: center;" v-text="manager.telephone"></td>
                <td style="vertical-align: middle;text-align: center;" v-text="manager.actualcard"></td>
                <td style="vertical-align: middle;text-align: center;" v-text="manager.totalcards"></td>
                <td style="vertical-align: middle;text-align: center;" v-text="manager.status | stateFilter"></td>
                <td style="vertical-align: middle;text-align: center;">
                    <input type="button" style="background-color: #c4d703;border-color: #c4d703;"
                           @click="updateActualCard(manager)" class="btn btn-primary btn-xs edit" value="充值">
                    <a href="javascript:void(0);" class="btn btn-primary btn-xs"
                       style="background-color:#f2ae43;border-color:#f2ae43;" @click="disConfirm(manager)">
                        <span v-if="manager.status==0">激活</span>
                        <span v-if="manager.status==1">封号</span>
                    </a>
                </td>
            </tr>
            <tr id="tab">

            </tr>
            </tbody>
        </table>
        <div class="footer-nav" v-if="managerList.length>0">
            <!--<ul class="pagination">-->
            <!--<li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>-->
            <!--</ul>-->
            <!--<ul class="pagination">-->
            <!--<li v-if="curIndex!=1"><a href="javascript:;" @click="getProductList(1)">首页</a></li>-->
            <!--<li  v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>-->
            <!--<li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="getProductList(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="getProductList(totalPage)">末页</a></li>-->
            <!--</ul>-->
            <ul class="pagination">
                <li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>
            </ul>
            <ul class="pagination">
                <li v-if="curIndex!=1"><a href="javascript:;" @click="turnPage(1)">首页</a></li>
                <li v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>
                <li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a
                        href="javascript:;" @click="turnPage(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="turnPage(totalPage)">末页</a></li>
            </ul>
        </div>
    </div>
</div>

<!--新增代理弹框--><!-- Modal -->
<div class="modal fade" id="managerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <!--<p class="modal-title pull-left" id="adduser">-->
                <!--用户信息-->
                <!--</p>-->
            </div>

            <form class="form-horizontal" role="form" id="managerForm">
                <div class="form-group" style=" margin-top: 20px;">
                    <label for="managername" class="col-md-2 control-label">代理账号名</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="managername" name="name" placeholder="请输入代理账号">
                        <label id="errorId" style="color: red;"></label>
                    </div>
                </div>
                <!--  <div class="form-group">
                      <label class="col-md-2 control-label">姓名</label>
                      <div class="col-md-8">
                          <input type="text" class="form-control" id="userNames" name="userName" placeholder="请输入姓名">
                          <label id="errorName" style="color: red;"></label>
                      </div>
                  </div>-->
                <div class="form-group">
                    <label class="col-md-2 control-label">手机</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="cellphone" name="telephone" placeholder="请输入手机">
                        <label id="errorMobile" style="color: red;"></label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">密码</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码"
                               maxlength="50">
                        <label id="errorPassword" style="color: red;"></label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2  control-label">角色</label>
                    <div class="col-md-4">
                        <select name="powerId" id="powerId">
                            <option value="2">顶级代理商</option>
                            <option value="3">普通代理</option>
                        </select>
                    </div>
                </div>
                <!-- <input type="hidden" name="flag" value="" id="flag">-->
            </form>
            <div class="modal-footer">
                <button type="button" style="background-color: #c4d703;border-color:#c4d703;" class="btn btn-primary"
                        id="managerFormSubmit" @click="addManagerFormSubmit">提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--禁用按钮-->
<div class="modal fade" id="delDisable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">确定是否禁用?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="cancelDisable()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--启用按钮-->
<div class="modal fade" id="delEnable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">确定是否启用?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="cancelDisable()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--充值操作弹框--><!-- Modal -->
<!--主题花编辑排期弹框--><!-- Modal -->
<div class="modal fade" id="chargeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    账户充值
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="form-group">
                        <label class="col-md-7 control-label" style="width: 100px;margin-left: 25px;margin-top: 8px;">充值房卡数：</label>
                        <div class="col-md-2">
                            <input type="hidden" id="userid" name="userid">
                            <input type="hidden" id="id" name="id">
                            <input type="text" class="form-control" id="playcardNum" style="font-size: 12px!important;height: 30px!important;">
                        </div>
                        <label class="col-md-5 control-label" style="width: 100px;">充值类型：</label>
                        <div class="col-md-2">
                            <select class="form-control" id="chargetype" style="font-size: 12px!important;height: 30px!important;width: 120px;">
                                <option value="1">赠送</option>
                                <option value="2">充值</option>
                            </select>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                    <!---->
                    <!--</div>-->
                </div>
            </div>
            <div class="modal-footer" style="border-top: none!important;">
                <button type="button" style="background-color: #c4d703;border-color:#c4d703;color: white;" class="btn btn-default" @click="addCardNum()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
    (function(window){
        //根据屏幕宽度动态改变html的font-size大小
        //获取屏幕宽度
        var winW = document.documentElement.clientWidth||document.body.clientWidth;
        document.documentElement.style.fontSize = winW/10+"px";
        window.onresize = function(){
            var winW = document.documentElement.clientWidth||document.body.clientWidth;
            document.documentElement.style.fontSize = winW/10+"px";
        }
    })(window);
    $(function () {
        // validatePermission();
        var pag = $.getUrlParam('pag');
        if (pag == null || pag == undefined || pag == "") {
            pag = 1;
        }
        //浏览器带搜索参数
        var telephone = $.getUrlParam('telephone') || "";
        var name = $.getUrlParam('name') || "";
        var powerId = $.getUrlParam('powerId') || "";
        $("#telephone").val(telephone);
        $("#name").val(name);
        $("#selpowerId").val(powerId);
        //实例化一个Vue对象
        window.vm = new Vue({
            el: "body",//指的是,Vue需要监听的范围,这个地方写body是为了监听整个页面,也可以控制某一块区域
            data: {
                "managerList": [],//需要循环遍历的对象
                "pageList": [],
                "totalPage": 0,
                "totalNum": 0,
                "curNum": 1,
                "curIndex": pag,
                "productCode": "",
                "name": name,
                "telephone": telephone,
                "productRemarks": "",
                "productSku": "",
                "powerId": powerId,
                "confirmDisable": {},
                "productPrice": "",
                "productCommod": "",
                "productCommodity": "",
                "productState": "",
                "page": "1",//当前第几页
                "limit": "20"//每页多少条
            },
            ready: function () {
                this.getManagerList(pag);//初始化,第一次进来查询商品列表
            },
            filters: {
                stateFilter: function (status) {
                    switch (status) {
                        case "1":
                            return "正常";
                        case "0":
                            return "封号";
                    }
                },
                stateBtnFilter: function (status) {
                    console.log(status);
                    return "删除";
                }
            },
            methods: {
                //充值按钮
                updateActualCard: function (manager) {
                    $("#chargeModal").modal("show");
                    this.manager = manager;
                    //TODO
                    $("#id").val(manager.id);
                },
                //点击保存按钮接口请求
                addCardNum: function () {
                    var _this = this;
                    if($("#playcardNum").val() == ""){
                        common.lightBox.showMessage(" 请输入房卡数!");
                        return false;
                    }
                    var param = {
                        "id":$("#id").val(),
                        "playcardNum": $("#playcardNum").val(),
                        "chargetype": $("#chargetype").val()
                    };
                    $.ajax({//编辑cookie
                        url: majiangurl + "/proxy/addActualCard",
                        type: "post",
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        dataType: "json",
                        data: {
                            "str": JSON.stringify(param)
                        },
                        success: function (res) {
                            if (res.status == "200") {
                                common.lightBox.showMessage("充值成功!");
                                $("#chargeModal").modal("hide");
                                _this.getManagerList(1);
                            } else {
                                common.lightBox.showMessage('充值失败');
                            }
                        }
                    });
                },

                pageInit: function (pageNum) {
                    if (pageNum == 1 || 9 + pageNum - 5 < this.totalPage || this.totalPage <= 11) {
                        if (this.totalPage <= 11) {
                            this.curNum = 1;
                        } else if (pageNum - 5 > 0) {
                            this.curNum = pageNum - 5;
                        } else if (this.totalPage > 11) {
                            this.curNum = 1;
                        }
                    } else if (pageNum > 1) {
                        if (pageNum - 5 > 0) {
                            this.curNum = this.totalPage - 10;
                        }
                    }
                    this.curIndex = parseInt(pageNum);
                },
                setPage: function (totalNum, pageNum) {
                    //根据一页10条,计算一共有多少页
                    this.totalPage = Math.ceil(totalNum / 20);
                    if (this.totalPage < 12) {
                        //如果不满11页,那么保存当前的总页数,比如可能只有5页,那么totalPage=5
                        this.pageList = this.totalPage;
                    } else {
                        this.pageList = 11;//默认最多显示11页
                    }
                    this.pageInit(pageNum);
                },
                //禁用弹框显示
                disConfirm: function (manager) {
                    this.confirmDisable = manager;
                    if (manager.status == 0) {
                        $("#delEnable").modal("show");
                    } else if (manager.status == 1) {
                        $("#delDisable").modal("show");
                    }

                },
                //启用禁用
                cancelDisable: function () {
                    var _this = this;
                    var managerId = this.confirmDisable.id;
                    var managerstatus = this.confirmDisable.status;
                    if (managerstatus == 0) {
                        var status = 1;
                    }
                    if (managerstatus == 1) {
                        var status = 0;
                    }
                    $.ajax({//关闭cookie
                        url: majiangurl + "/proxy/updateManagerStatus",
                        type: "post",
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        dataType: "json",
                        data: {
                            "str": JSON.stringify({
                                "id": managerId,
                                "status": status
                            })
                        },
                        success: function (data) {
                            if (data.status == "200") {
                                common.lightBox.showMessage(data.message);
                                _this.getManagerList(1);
                            } else {
                                common.lightBox.showMessage(data.message);
                                _this.getManagerList(1);
                            }
                        }
                    });
                },
                addManager: function () {
                    $("#managerModal input").val("");
                    $("#flag").val("add");
                    $("#managername").removeAttr("readonly", "true");
                    $("#managerModal").modal('show');
                },
                //添加代理
                addManagerFormSubmit: function () {
                    var _this = this;
                    var managername = $("#managername").val();//用户名验证
                    var cellphone = $("#cellphone").val();//手机验证
                    var password = $("#password").val();//邮箱验证
                    var powerId = $("#powerId").val();//角色验证

//                if (!$("#userForm").validate().form()) {
//                    return;
//                }
                    if (!/^\w{1,20}$/.test(managername)) {//用户名验证
                        $("#errorId").text("用户名最多20字符,包含字母和数字组成,不能为汉字");
                        return;
                    } else {
                        $("#errorId").text("");
                    }

                    if (cellphone == "") {//手机号验证
                        $("#errorMobile").text("手机号不能为空");
                        return;
                    } else {
                        $("#errorMobile").text("");
                    }
                    if (!/^1\d{10}$/.test(cellphone)) {//手机号验证
                        $("#errorMobile").text("手机号必须为数字,11位");
                        return;
                    } else {
                        $("#errorMobile").text("");
                    }

                    if (password == "") {//邮箱验证
                        $("#errorPassword").text("密码不能为空");
                        return;
                    } else {
                        $("#errorPassword").text("");
                    }
                    if (powerId == "") {//角色验证
                        $("#errorRoleId").text("请选择角色");
                        return;
                    } else {
                        $("#errorRoleId").text("");
                    }
                    $.postRequest(majiangurl + "/proxy/addManager",
                            {
                                "str": JSON.stringify({
                                    "name": managername,
                                    "telephone": cellphone,
                                    "powerId": powerId,
                                    "password": password
                                })
                            },
                            function (data) {
                                if (data.status == '200') {
                                    common.lightBox.showMessage("添加成功！");
                                    $("#managerModal").modal('hide');
                                    _this.getManagerList(1);
                                } else if (data.status == '106') {
                                    common.lightBox.showMessage(managername + "已存在，请更换账号名称");
                                } else {
                                    common.lightBox.showMessage(data.message);
                                }
                            });
                },
                //查询代理商列表
                getManagerList: function (pageNum) {
                    var _this = this;
                    common.lightBox.showLoading();
                    //接口请求
                    $.postRequest(majiangurl + "/proxy/searchManagerList", {
                        "str": JSON.stringify({
                            "name": this.name,
                            "telephone": this.telephone,
                            "powerId": this.powerId,
                            "page": parseInt(this.curIndex),
                            "limit": "20",
                        })
                    }, function (res) {
                        common.lightBox.hideLoading();
                        if (res.result.rows.length != 0) {
                            //把接口返回的值保存到userList中
                            _this.managerList = res.result.rows;
                            _this.setPage(res.result.count, parseInt(pageNum));
                            _this.totalNum = res.result.count;
                            //_this.pageInit(pageNum);
                            $("#tab").empty();
                        } else {
                            _this.totalNum = 0;
                            $("#tab").html('<td style="font-size: 20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align: center;"colspan="6">没有数据</td>')
                            _this.managerList = [];
                        }
                    })
                },
                prevPage: function () {
                    if (this.curIndex == 1) {
                        return;
                    }
//                    this.getProductList(this.curIndex-1);
                    this.turnPage(this.curIndex - 1);

                },
                nextPage: function () {
                    if (this.curIndex == this.totalPage) {
                        return;
                    }
//                    this.getProductList(this.curIndex+1);
                    this.turnPage(this.curIndex + 1);
                },
                turnPage: function (pageNo) {
                    //this.pageInit(pageNo);
                    var name = $("#name").val() || ""
                    var telephone = $("#telephone").val() || "";
                    var powerId = $("#selpowerId").val() || "";
                    window.location.href = window.location.pathname + "?pag=" + pageNo + "&name=" + name + "&telephone=" + telephone + "&powerId=" + powerId;

                }
            }
        });
    })
</script>
</body>
</html>
